<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>refresh</title>
    <style>
        #form {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            background: rgba(154, 205, 50, 0.8);
            border: 5px solid rgba(217, 231, 187, 0.6);
            border-radius: 10px;
        }

        #form p {
            width: 450px;
            height: 45px;
            line-height: 45px;
            margin: 20px auto;
            background: rgba(216, 241, 164, 0.6);
            border: 5px solid rgba(217, 231, 187, 0.6);
            border-radius: 10px;
            color: #666;
            font-size: 17px;
        }

        #btn {
            width: 100px;
            height: 30px;
            background: rgba(154, 205, 50, 0.8);
            margin: 0 auto;
        }

        .inp {
            height: 30px;
            width: 250px;
            color: #111;
            border: 2px solid lightslategray;
            border-radius: 6px;
            margin-left: 30px;
            padding-left: 10px;
        }

        .error {
            color: red;
        }
    </style>
</head>

<body>
    <form id="form" action="">
        <p>
            用户昵称:
            <input id="username" class="inp" type="text" name="username">
        </p>
        <p>
            实际年龄:
            <input class="inp" type="text" name="age">
        </p>
        <p>
            邮件地址:
            <input id="email" class="inp" type="text" name="email">
        </p>
        <p>
            联系电话:
            <input class="inp" type="text" name="phone">
        </p>
        <p>
            用户性别：
            <input name="sex" type="radio" value="boy">boy
            <input name="sex" type="radio" value="gril">gril
        </p>
        <p>
            兴趣爱好：
            <input name="hooby" type="checkbox" value="css">css
            <input name="hooby" type="checkbox" value="html">html
            <input name="hooby" type="checkbox" value="js">js
            <input name="hooby" type="checkbox" value="jquery">jquery
            <input name="hooby" type="checkbox" value="node">node
        </p>
        <p id="btnp">
            <input id="btn" onclick="refresh()" type="button" value="保存">
        </p>
    </form>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.validate.js"></script>
<script src="./js/messages_zh.js"></script>
<script>
    $("form").validate({
        submitHandler: function (form) {
            alert("提交事件!");
            form.submit();
        },
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            age:{
                digits:true,
                required:true,
                minlength:1,
                maxlength:3
            },
            email: {
                required: true,
                email: true
            },
            phone:{
                digits:true,
                required:true,
                minlength:11,
                maxlength:11
            }
        },

    });
    var username = $('[name=username]');
    var age = $('[name=age]');
    var email = $('[name=email]');
    var phone = $('[name=phone]');
    function refresh() {
        var data = {
            username: username.val(),
            age: age.val(),
            email: email.val(),
            phone: phone.val(),
            sex: $('[name=sex]:checked').val(),
            "hobby": []
        }
        // 回填选项框
        $('input:checkbox:checked').val(function (index, value) {
            data.hobby.push(value)
        })
        $.post('/abc', {
            getobj: JSON.stringify(data)
        }).done(function (res) {
            console.log(res);
        })
    }

    // 跨域资源共享
    $.get('http://106.12.24.181:2222/home', { id: 'stu' }).done(function (res) {
        username.val(res.username);
        age.val(res.age);
        email.val(res.email);
        phone.val(res.phone);
        $('[value=' + res.sex + ']').prop('checked', true);

        $.map(res.hobby, function (value) {
            $('[value="' + value + '"]').prop('checked', true);
        })
    })
</script>

</html>""